<form *ngIf="profile$ | async as profile" [formGroup]="profileForm" (ngSubmit)="submitForm(profile)">
  <div class="user-top-content">
    <div class="user-form-content">
      <button
        [disabled]="disabled$ | async"
        class="camera-wrapper"
        type="button"
        (click)="showEditImage ? openUploadDialog(profile) : null"
      >
        <div class="i-wrapper" *ngIf="showEditImage">
          <i class="las la-camera"></i>
        </div>
        <cnsl-avatar
          *ngIf="profile.displayName"
          class="avatar"
          [name]="profile.displayName"
          [avatarUrl]="profile.avatarUrl || ''"
          [forColor]="preferredLoginName"
          [size]="80"
        >
        </cnsl-avatar>
      </button>

      <div class="usernamediv">
        <cnsl-form-field class="formfield">
          <cnsl-label>{{ 'USER.PROFILE.USERNAME' | translate }}</cnsl-label>
          <input cnslInput formControlName="username" />
        </cnsl-form-field>
        <button [disabled]="disabled$ | async" type="button" mat-stroked-button class="edit" (click)="changeUsername()">
          {{ 'USER.PROFILE.CHANGEUSERNAME' | translate }}
        </button>
      </div>
    </div>
    <div class="user-grid">
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.FIRSTNAME' | translate }}</cnsl-label>
        <input cnslInput formControlName="givenName" />
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.LASTNAME' | translate }}</cnsl-label>
        <input cnslInput formControlName="familyName" />
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.NICKNAME' | translate }}</cnsl-label>
        <input cnslInput formControlName="nickName" />
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.DISPLAYNAME' | translate }}</cnsl-label>
        <input cnslInput formControlName="displayName" />
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.GENDER' | translate }}</cnsl-label>
        <mat-select formControlName="gender">
          <mat-option *ngFor="let gender of genders" [value]="gender">
            {{ 'GENDERS.' + gender | translate }}
          </mat-option>
        </mat-select>
      </cnsl-form-field>
      <cnsl-form-field class="formfield">
        <cnsl-label>{{ 'USER.PROFILE.PREFERRED_LANGUAGE' | translate }}</cnsl-label>
        <mat-select formControlName="preferredLanguage">
          <mat-option *ngFor="let language of languages" [value]="language">
            {{ 'LANGUAGES.' + language | translate }}
          </mat-option>
        </mat-select>
      </cnsl-form-field>
    </div>
  </div>
  <div class="btn-container">
    <button [disabled]="disabled$ | async" class="submit-button" type="submit" color="primary" mat-raised-button>
      {{ 'ACTIONS.SAVE' | translate }}
    </button>
  </div>
</form>
